<template>
	<navBar :title="pageData.title" :Color="Pinia.color" city tabBar></navBar>

	<Bannel :pageData="pageData.bannerData"></Bannel>

	<Navigation :pageData="pageData.menuData"></Navigation>

	<NavFiexd @resetData="resetData"></NavFiexd>

	<List :pageData="listData"></List>

	<homeAgree></homeAgree>

	<connection></connection>
</template>

<script setup>
	import { ref, inject, watch } from 'vue';
	import { onLoad,  onReachBottom } from '@dcloudio/uni-app';
	import Http from '@/common/request.js';
	import { usePiniaStore } from '@/store/pinia.js';

	const Pinia = usePiniaStore();
	const { Toast } = inject('Utils');
	const pageData = ref('');
	const page = ref(1);
	const limit = ref(20);
	const getMore = ref(true);
	const listData = ref([]);
	const listTarget = ref({});


	onLoad(() => {
		getActs();
		getMembers();
	})



	const getActs = () => {
		Http.get({
			url: '/WeddingApi/getActs',
		}).then(res => {
			if (res.code != 200) return Toast(res.msg);
			const result = res.data;
			pageData.value = result;
			Pinia.$patch((state) => {
				state.City = result.city;
			})
		})
	}

	const resetData = (target) => {
		page.value = 1;
		getMore.value = true;
		listTarget.value = target;
		getMembers(target);
	}

	const getMembers = (target = {}) => {
		let data = {
			page: page.value,
			limit: limit.value,
			order: 'views'
		}
		data = { ...data, ...target }
		Http.get({
			url: '/WeddingApi/getMembers',
			data
		}).then(res => {
			if (res.code != 200) return Toast(res.msg);
			const result = res.data.list || [];
			page.value == 1 ? listData.value = result : listData.value = [...listData.value, ...result];
			if (result.length < limit.value) getMore.value = false;
		})
	}

	watch(() => Pinia.City, (newVal) => {
		page.value = 1;
		getMore.value = true;
		getMembers(listTarget.value);
	})

	onReachBottom(() => {
		if (!getMore.value) return;
		page.value++;
		getMembers(listTarget.value);
	})
</script>

<style lang="scss">

</style>